@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#tree{width:100vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;transform: translateX(-12.5vw);}

.left{display: none;}
.top{height: 4vh;overflow: hidden;}
.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;overflow-x: hidden;}
.media p,.media a,.media h2,.media svg,.media li,.media img{transform: scale(1,1.82);}
#lyt{overflow:hidden;
	color: #262626;
	font-size: 30px;
	width: 90%;
	height: 50px;
	line-height: 50px;
	margin: 0.625rem 0 1.875rem 0;
	border-radius: 10px;
	border: 5px solid #F2F2F2;
	padding: 20px;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
}
#lyt:hover{height: 300px;width: 80%;background-color:#262626;color: #2FC7CC;}
#xinfa{width: 92%;height: 20%;margin: 0 auto;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding-top: 1%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
#qianzhui{display: inline-block;width: 40%;height: 10%;margin: 3% 2% 3% 2.5%;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding: 2%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
#shuru{width: 70%;height: 10%;margin: 3% auto;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding: 2%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
input[type=text] {
  width: 60%;
}

input[type=text]:focus {
  background-color: lightblue;
}
#shuru input{background-color: rgba(0,0,0,0);color: #F2F2F2;transform: translate(20px,-20px);height: 40px;border: 0px;font-size: 30px;}
#xinfa input[type=submit] {
	position: absolute;
	bottom: 200px;
		  right: 100px;
  width: 20%;
  height: 40px;
  background-color: #4CAF50;
  box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
  				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
  color: white;
  border: none;
  border-radius: 15px;
  margin-left: 80px;
  cursor: pointer;
}
#shuru input[type=text]:focus {
	color: #2FC7CC;
  background-color: #262626;
}
}
@media only screen and (min-device-width : 960px){
	#tree{width:55vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;}
	#lyt{overflow:hidden;
		color: #262626;
		font-size: 30px;
		width: 70%;
		height: 30px;
		line-height: 35px;
		margin: 0.625rem 0 1.875rem 0;
		border-radius: 10px;
		border: 5px solid #F2F2F2;
		padding: 10px;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
	#lyt:hover{height: 70px;width: 80%;background-color:#262626;color: #2FC7CC;}
	#xinfa{width: 92%;height: 20%;margin: 0 auto;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding-top: 1%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
					 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
	#qianzhui{display: inline-block;width: 16%;height: 10%;margin: 3% 2% 3% 2.5%;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding: 2%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
					 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
	#shuru{width: 88%;height: 10%;margin: 3% auto;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding: 2%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
					 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);}
	input[type=text] {
	  width: 60%;
	}
	
	input[type=text]:focus {
	  background-color: lightblue;
	}
	#shuru input{background-color: rgba(0,0,0,0);color: #F2F2F2;transform: translate(20px,-20px);height: 40px;border: 0px;font-size: 30px;}
	#xinfa input[type=submit] {
	position: absolute;
	bottom: 30px;
		  right: 20px;
		  width: 10%;
	  height: 40px;
	  background-color: #4CAF50;
	  box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
	  				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	  color: white;
	  border: none;
	  border-radius: 15px;
	  margin-left: 80px;
	  cursor: pointer;
	}
	#shuru input[type=text]:focus {
		color: #2FC7CC;
	  background-color: #262626;
	}
}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s,height 0.4s linear 0s,opacity 3s ease-in 0s;}

body{
	overflow: hidden;
	background-color: #262626;
	background-image: url(../img/lyba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.media1{
	overflow: hidden;
	position: relative;
	height: 92vh;
	width: 55vw;
	margin: 0 auto;
	background-color: white;
}
#tree{height: auto;position: absolute;margin: 0 auto;z-index: 99;}
.top{
	width: 100vw;
	height: 8vh;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
	width: 65vw;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: linear-gradient(180deg, #3d0c4f 40%, #30c9cd 100%);
	background-size: 150% 150%;
	background-position: center;
}
.media::-webkit-scrollbar {
    display: none;
}
#t1{position: absolute;width:85%;height: auto;left: 15%;top: -20%;}
#t2{position: absolute;width:100%;height: auto;}

.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
.lc#lc1{
	background: #262626;
}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#lc6{width: 12vw;}
#al2:hover>#l>#lc2{width: 10vw;}
.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}	
#lishi{width: 88%;height: 68%;margin: 3% auto;background-image: linear-gradient(90deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);border-radius: 10px;padding: 2%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
				 overflow-y: scroll;}

#lyt p{}
